<script setup lang="ts">
import { ref } from 'vue'
import SimplePie from './common/SimplePie.vue'
import Simpleline from './common/Simpleline.vue'
import Header from './common/Header.vue'


const sex = ref("男")
</script>
<template>
    <div class="up-info">
        <div class="container">
            <Header>UP主数据</Header>
            <TopInfo></TopInfo>
            <div class="details">
                <img class="face" src="https://i1.hdslb.com/bfs/face/ae16880a3ccba26a2461a04b31ab7f98061cc576.jpg"
                    referrerPolicy="no-referrer" crossorigin="anonymous" alt="">
                <div class="text">
                    <div class="name">★⑥檤轮囬★</div>
                    <div class="order">
                        <div class="number">1280.5万</div>
                        <div class="sex">
                            <template v-if="'男' == sex">
                                <svg t="1692569550417" class="icon" viewBox="0 0 1075 1024" version="1.1"
                                    xmlns="http://www.w3.org/2000/svg" p-id="2060">
                                    <path
                                        d="M537.6 8.8576C259.7376 8.8576 34.4576 234.1376 34.4576 512s225.28 503.1424 503.1424 503.1424 503.1424-225.28 503.1424-503.1424S815.4624 8.8576 537.6 8.8576z m289.1264 490.8032c0 18.7904-12.3392 31.6416-31.6416 31.6416-19.3536 0-31.6928-12.288-31.6928-31.6416V340.3776l-134.6048 124.928c25.1904 34.3552 40.7552 76.7488 40.7552 122.368 0 113.152-94.4128 207.5136-207.5648 207.5136s-207.5648-94.3616-207.5648-207.5648c0-113.152 94.3616-207.5648 207.5648-207.5648 45.568 0 87.9616 15.5648 122.8288 41.3184l134.0928-129.28h-168.96c-18.7904 0-37.5296-12.3392-37.5296-31.6416s12.288-31.6416 31.6416-31.6416h251.0336c18.7392 0 31.6416 12.288 31.6416 31.6416v239.2064z"
                                        fill="#51BCE2" p-id="2061"></path>
                                    <path
                                        d="M317.1328 587.6224a144.8448 144.8448 0 0 0 289.6384 0 144.8448 144.8448 0 0 0-289.6384 0z"
                                        fill="#51BCE2" p-id="2062"></path>
                                </svg>
                            </template>
                            <template v-else-if="'女' == sex">
                                <svg t="1692569820165" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                    xmlns="http://www.w3.org/2000/svg" p-id="2211">
                                    <path d="M430.08 450.56a145.92 145.92 0 1 0 291.84 0 145.92 145.92 0 1 0-291.84 0z"
                                        fill="#FF838E" p-id="2212"></path>
                                    <path
                                        d="M512 0C230.4 0 0 230.4 0 512s230.4 512 512 512 512-230.4 512-512S793.6 0 512 0z m217.6 596.48c-76.8 74.24-194.56 84.48-281.6 20.48L409.6 655.36l87.04 87.04-43.52 43.52-87.04-87.04L276.48 788.48l-43.52-43.52L322.56 655.36l-87.04-87.04 43.52-43.52 87.04 87.04 40.96-40.96c-61.44-84.48-51.2-202.24 23.04-276.48 84.48-71.68 209.92-66.56 289.28 12.8 79.36 79.36 81.92 204.8 10.24 289.28z"
                                        fill="#FF838E" p-id="2213"></path>
                                </svg>
                            </template>
                            <template v-else>
                                <svg t="1692569844778" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                    xmlns="http://www.w3.org/2000/svg" p-id="2362">
                                    <path d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z" fill="#7D73F1"
                                        p-id="2363">
                                    </path>
                                    <path
                                        d="M505.417143 725.942857c23.917714 0 43.373714 19.309714 43.373714 43.300572v0.073142a43.373714 43.373714 0 0 1-36.205714 42.715429l-7.021714 0.585143a43.300571 43.300571 0 0 1-0.146286-86.674286z m6.070857-514.413714c45.860571 0 89.965714 16.969143 123.830857 47.469714l9.874286 9.508572c31.670857 32.621714 48.347429 76.8 46.08 122.148571-2.486857 46.372571-16.676571 82.870857-87.698286 153.6-32.402286 32.475429-53.979429 57.563429-59.684571 79.579429l-1.316572 7.241142a36.059429 36.059429 0 0 1-35.766857 32.475429H503.222857a36.059429 36.059429 0 0 1-32.036571-32.914286v-6.509714c11.556571-51.419429 40.301714-97.28 81.554285-130.194286 60.708571-61.001143 65.243429-82.505143 66.413715-102.912l0.219428-3.803428a92.598857 92.598857 0 0 0-19.236571-60.854857l-7.168-8.265143a112.420571 112.420571 0 0 0-69.997714-34.011429l-11.483429-0.585143a107.666286 107.666286 0 0 0-106.642286 96.914286l-0.585143 10.24a36.059429 36.059429 0 0 1-71.168 6.144l-0.804571-6.070857a179.2 179.2 0 0 1 167.424-178.834286l11.776-0.365714z"
                                        fill="#FFFFFF" p-id="2364"></path>
                                </svg>
                            </template>
                        </div>
                    </div>
                    <div class="sign">
                        地址：同德小区A区2栋10-01号商铺德小区A区2栋10-01号商铺
                    </div>
                </div>
                <div class="total">
                    <div>粉丝</div>
                    <div>56875412</div>
                </div>
            </div>
            <div class="count-title">
                视频分类数据
            </div>

            <div class="video-pip">
                <SimplePie></SimplePie>
            </div>
        </div>

        <div class="fans-line container">
            <div class="count-title">
                粉丝变化数据
            </div>
            <Simpleline></Simpleline>

            <div class="date-nav">
                <div class="item active">近7天</div>
                <div class="item">近15天</div>
                <div class="item">近1个月</div>
                <div class="item">近3个月</div>
            </div>
        </div>

    </div>
</template>
<style lang="less">
@import url(../assets/css/base.less);

.up-info {
    width: 10rem;
    margin: 0 auto;

    .details {
        height: 2.6667rem;
        display: flex;
        align-items: center;
        position: relative;
        margin-bottom: .5333rem;

        .face {
            display: block;
            width: 2.1333rem;
            height: 2.1333rem;
            border-radius: .1067rem;
            border: .0267rem solid #4BC2FF4C;
            margin-left: .2667rem;
        }

        .text {
            margin-left: .2667rem;

            .name {
                font-size: .48rem;
                text-align: left;
            }

            .order {
                margin-top: .16rem;
                display: flex;
                color: @text-color-secondary;
                font-size: .3733rem;

                .sex {
                    margin-left: .16rem;
                    width: .5333rem;
                    height: .5333rem;
                }
            }

            .sign {
                margin-top: .16rem;
                color: @text-color-secondary;
                font-size: .32rem;
                margin-right: .3733rem;
            }
        }

        .total {
            position: absolute;
            right: 0;
            top: 0;
            padding: .16rem;
            background: #27EAFF19;

            div:first-child {
                font-size: .32rem;
                text-align: center;
                color: rgba(255, 255, 255, 0.6);
            }

            div:last-child {
                font-size: .3733rem;
                padding-top: .16rem;
            }
        }
    }

    .count-title {
        width: 8rem;
        height: .96rem;
        margin: 0 auto;
        background: linear-gradient(90deg, rgba(75, 194, 255, 0%) 0%, rgba(75, 194, 255, 10%) 51.14%, rgba(75, 194, 255, 0%) 99.94%);
        border: .0267rem solid;
        border-image: linear-gradient(90deg, rgba(75, 194, 255, 0%) 0%, rgba(75, 194, 255, 0.2), rgba(75, 194, 255, 0%) 99.94%) 1;
        text-align: center;
        line-height: .96rem;
        font-size: .3733rem;
    }

    .video-pip {
        padding-bottom: .5333rem;
    }

    .fans-line {
        margin-top: .3733rem;
        padding-bottom: .2667rem;

        .date-nav {
            display: flex;
            margin-top: .5333rem;
            padding-bottom: .6133rem;
            justify-content: center;

            .item {
                font-size: .32rem;
                height: .64rem;
                background: linear-gradient(135deg, rgba(15, 29, 61, 1) 0.01%, rgba(22, 41, 86, 1) 51.27%, rgba(15, 29, 61, 1) 99.98%);
                border: .0133rem solid rgba(75, 194, 255, 0.2);
                box-shadow: inset 0px 0px .16rem rgba(75, 194, 255, 0.3);
                line-height: .64rem;
                padding-left: .2667rem;
                padding-right: .2667rem;

                &:not(:last-child) {
                    margin-right: .5333rem;
                }

                &.active {
                    background: linear-gradient(135deg, rgba(15, 29, 61, 1) 0.01%, rgba(37, 68, 137, 1) 51.27%, rgba(15, 29, 61, 1) 99.98%);
                    border: .0133rem solid rgba(75, 194, 255, 0.6);
                }
            }
        }
    }
}
</style>